<template>
    <div>
        <van-grid :border="false" :column-num="4">
            <van-grid-item>
                <van-dropdown-menu>
                    <van-dropdown-item @change="changeSelect" v-model="value1" :options="option1" />
                </van-dropdown-menu>
            </van-grid-item>
            <van-grid-item>
                <van-dropdown-menu>
                    <van-dropdown-item @change="changeSelect" v-model="value1" :options="option1" />
                </van-dropdown-menu>
            </van-grid-item>
            <van-grid-item>
                <van-dropdown-menu>
                    <van-dropdown-item @change="changeSelect" v-model="value1" :options="option1" />
                </van-dropdown-menu>
            </van-grid-item>
            <van-grid-item>
                <van-dropdown-menu>
                    <van-dropdown-item @change="changeSelect" v-model="value1" :options="option1" />
                </van-dropdown-menu>
            </van-grid-item>
        </van-grid>
 
    </div>
</template>

<script>
export default {
    // props: {
    //     robotId: {
    //         required: false,
    //         type: String
    //     }
    // },
    name: 'ImageStyle',
    data() {
        return {
            value1: '',
            value2: '',
            option1: [
                { text: '默认风格', value: '' },
                { text: '新款商品', value: 1 },
                { text: '活动商品', value: 2 },
            ],
            option2: [
                { text: '默认排序', value: '' },
                { text: '好评排序', value: 'b' },
                { text: '销量排序', value: 'c' },
            ],
        }
    },
    components: {},
    computed: {},
    methods: {
        changeSelect(value) {
            console.log(value, arguments)
        }
    }
}
</script>

<style scoped lang='scss'>
::v-deep .van-dropdown-menu__bar {
    height: 30px;
}

::v-deep .van-dropdown-menu {
    display: flex;
    flex-wrap: wrap;

}

::v-deep .van-dropdown-menu__item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .van-ellipsis {
        background-color: aliceblue;

        height: 120%;
    }

}

::v-deep .van-dropdown-menu__title::after {
    display: none !important;
}
</style>
